import {useRoutes} from "react-router";
import EmptyLayout from "@layouts/components/EmptyLayout";
import {lazy, FC, Suspense} from "react";
import Loading from '@comps/Loading'
import {Navigate} from "react-router-dom";
import LayOut from "@layouts/components/LayOut";
import type {XRoutes} from "./types";
import {
    ApiOutlined,
    HomeOutlined,
    TagsOutlined,
    UserOutlined,
    SettingOutlined,
    CommentOutlined,
    FileTextOutlined
} from "@ant-design/icons";


const Set = lazy(() => import('@pages/Set'));
const Login = lazy(() => import('@pages/Login'));
const Users = lazy(() => import('@pages/Users'));
const NotFound = lazy(() => import('@pages/404'));
const Home = lazy(() => import('@pages/Home/index'));
const Comment = lazy(() => import('@pages/Comment'));
const Category = lazy(() => import('@pages/Category'));
const addArticle = lazy(() => import('@pages/addArticle'));
const ArticleManage = lazy(() => import('@pages/ArticleManage'));
const FriendLinkManage = lazy(() => import('@pages/FriendLinkManage'));
// 获取路径
const path = window.location.pathname;
const load = (Comp: FC) => {
    return (
        // 因为路由懒加载，组件需要一段网络请求时间才能加载并渲染
        // 在组件还未渲染时，fallback就生效，来渲染一个加载进度条效果
        // 当组件渲染完成时，fallback就失效了
        <Suspense fallback={<Loading/>}>
            {/* 所有lazy的组件必须包裹Suspense组件，才能实现功能 */}
            <Comp/>
        </Suspense>
    );
};
// index 值为 0 时，不渲染菜单
const routes = [
    {
        path: '/',
        element: <EmptyLayout/>,
        children: [
            {
                path: "login",
                element: load(Login)
            }
        ]
    },
    {
        path: '/mkbk',
        element: <LayOut/>,
        children: [
            {
                path: "/mkbk/home",
                meta: {
                    title: "首页",
                    icon: <HomeOutlined/>
                },
                element: load(Home)
            },
            {
                path: "/mkbk/article",
                meta: {
                    title: "文章管理",
                    icon: <FileTextOutlined/>
                },
                children: [
                    {
                        path: "/mkbk/article/add",
                        meta: {
                            title: "添加文章"
                        },
                        element: load(addArticle)
                    },
                    {
                        path: "/mkbk/article/del",
                        meta: {
                            title: "文章列表"
                        },
                        element: load(ArticleManage)
                    },
                    {
                        path: "/mkbk/article/edit/:id",
                        meta: {
                            title: "编辑文章"
                        },
                        element: load(addArticle),
                        index: true
                    }
                ]
            },
            {
                path: "/mkbk/users",
                meta: {
                    title: '用户管理',
                    icon: <UserOutlined/>
                },
                element: load(Users)
            },
            {
                path: '/mkbk/category',
                meta: {
                    title: '分类管理',
                    icon: <TagsOutlined/>
                },
                element: load(Category)
            },
            {
                path: '/mkbk/comment',
                meta: {
                    title: '评论管理',
                    icon: <CommentOutlined/>
                },
                element: load(Comment)
            },
            {
                path: '/mkbk/link',
                meta: {
                    title: '友链管理',
                    icon: <ApiOutlined/>
                },
                element: load(FriendLinkManage)
            },
            {
                path: '/mkbk/setting',
                meta: {
                    title: '设置',
                    icon: <SettingOutlined/>
                },
                element: load(Set)
            }
        ]
    },
    {
        path: '/404',
        element: load(NotFound)
    },
    {
        path: '*',
        element: <Navigate to="/404"/>
    }
]

// 自定义hook ==> 配置路由
export const useAppRoutes = () => {
    return useRoutes(routes);
};

// 找到要渲染成左侧菜单的路由
export const findSideBarRoutes = () => {
    const currentIndex = routes.findIndex(
        (route) => route.path === "/mkbk");
    return routes[currentIndex].children as XRoutes;
};
export default routes;